<section id="rentalIncome">
  <div class="menuBox">
    <div class="header-main">租金收益分析</div>
    <div style="width: 290px;margin-right: 20px;">
      <hl-radio-button :width="96" :data="listMenu" v-model="active" @on-select-item="getChartUrl" merge>
      </hl-radio-button>
    </div>
  </div>
  <!-- 年度实收同比增长/变化/完成率分析 -->
  <div class="proBox">
    <span>{{textY}}</span>
    <hl-select :data="projectList" placeholder="请选择项目" v-model="projectId_Y" @on-change="getChartData('Y')" :width="150"
      type="primary">
    </hl-select>
  </div>
  <div id="chart01" v-show="isShowY"></div>
  <div class="noData" v-show="!isShowY">暂无数据</div>

  <!-- 月度实收环比增长/变化/完成率分析 -->
  <template v-if="active!='wc'">
    <div class="proBox">
      <span>{{textM}}</span>
      <hl-select v-if="active == 'wc'" :data="year" placeholder="请选择日期" v-model="selectedYear"
        @on-change="getChartData('M')" :width="150" type="primary"></hl-select>
  
      <hl-select v-else :data="projectList" placeholder="请选择项目" v-model="projectId_M" @on-change="getChartData('M')"
        :width="150" type="primary">
      </hl-select>
    </div>
    <!-- <div id="chart02"></div> -->
    <div id="chart02" v-show="isShowM"></div>
    <div class="noData" v-show="!isShowM">暂无数据</div>
  </template>
</section>
<script src="modules/report_ui/scripts/rentalIncome.js" charset="utf-8"></script>
<style>
  #rentalIncome {
    padding-bottom: 50px;
  }

  .menuBox {
    display: flex;
    justify-content: space-between;
    height: 56px;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
  }
  .header-main{
    margin-left: 24px;
    font-size: 16px;
    color: #666;
    font-weight: bold;
  }
  .proBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }

  #chart01,
  #chart02 {
    height: 400px;
    width: 100%;
  }

  .noData {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>